<template>
  <div class="home">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item">
        <img :src="item" alt="轮播图">
      </van-swipe-item>
    </van-swipe>
    <div>
      <ul class="nav-box">
        <li class="nav-item" @click="jump('newlist')">
          <i><img src="../assets/imgs/menu01.png" alt=""></i>
          <p>新闻资讯</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu02.png" alt=""></i>
          <p>图片分享</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu03.png" alt=""></i>
          <p>商品购买</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu04.png" alt=""></i>
          <p>留言反馈</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu05.png" alt=""></i>
          <p>视频专区</p>
        </li>
        <li class="nav-item">
          <i><img src="../assets/imgs/menu06.png" alt=""></i>
          <p>联系我们</p>
        </li>
      </ul>
    </div>

    <!-- tabbar组件 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" info="5">购物车</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant'
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      imgList: [
        'http://m.itcast.cn/images/newslide/homepageandphone/20181528141522828.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20180918170957294.jpg',
        'http://m.itcast.cn/images/newslide/homepageandphone/20184827134845878.jpg'
      ],
      active: 0
    }
  },
  methods: {
    // 点击跳转
    jump (routeName) {
      this.$router.push({ name: routeName })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  .van-swipe {
    height: 205px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .nav-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      margin: 10px 0;
      cursor: pointer;
      p {
        font-size: 20px;
      }
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
